<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>账户和安全</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/base1.css">
    <link rel="stylesheet" href="./css/safe.css">
</head>

<body>
    <div class="safe_con">
        <!-- 顶部 -->
        <div class="safe_top">
            <a href="javascript:;">
                <i class="icon iconfont icon-fanhui"></i>
                返回
            </a>
            <p>账户和安全</p>
        </div>
        <!-- 表单 -->
        <form active="" class="safe_register">
            <div>
                <span>手机号:</span>&nbsp;
                <input type="text" placeholder="你的注册手机号">
                <input type="button" value="获取验证码" id="btn">
            </div>
            <div>
                <span>验证码:</span>&nbsp;
                <input type="text" placeholder="你的手机收到的验证码">
            </div>
            <div>
                <span>新密码:</span>&nbsp;
                <input type="text" placeholder="6-20位字母和数字">
            </div>
            <div>
                <span>重复密码:</span>&nbsp;
                <input type="text" placeholder="6-20位字母和数字">
            </div>
            <input type="submit" value="确定">
        </form>
    </div>
    <script>
        var oBtn = document.querySelector('#btn');
        var i = 60;
        var flag = true;
        oBtn.onclick = function () {
            if (flag) {
                var timer = setInterval(function () {
                    oBtn.value = "重新获取" + i + "秒"
                    i--;
                    if (i == 0) {
                        clearInterval(timer);
                        oBtn.value = "获取验证码";
                        i = 5;
                        flag = true;
                    }
                }, 1000)
                flag = false;
            }


        }
    </script>
</body>

</html>